<template>
    <editor id="tinymceEdit" v-model="html" :init="init" ></editor>
</template>

<script>
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/link'
    import 'tinymce/plugins/code'
    import 'tinymce/plugins/table'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/contextmenu'
    import 'tinymce/plugins/wordcount'
    import 'tinymce/plugins/colorpicker'
    import 'tinymce/plugins/textcolor'
    import 'tinymce/plugins/fullscreen'
    import {upload} from "../../api/base/common";
    export default {
        name: "el-tieditor",
        props:{
            value:{
                type:String,
                required:false,
                default:''
            }
        },
        watch:{
            value:{
                handler:function (val) {
                    this.html=this.value;
                },
                immediate:true
            },
            html:{
                handler:function (val) {
                   this.$emit("input",val)
                },
                immediate:true
            }
        },
        created(){
          this.html=this.value;
        },
        components: {Editor},
        data(){
            return {
                html:'',
                init: {
                    language_url: './tinymce/zh_CN.js',
                    language: 'zh_CN',
                    skin_url: './tinymce/skins/ui/oxide',
                    selector: "tinymceEdit",
                    menubar: "view",
                    height: 600,
                    plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu fullscreen',
                    toolbar:
                        'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | fullscreen',
                    branding: false,
                    image_advtab: true,

                    //上传图片回调
                    images_upload_handler (blobInfo, success, failure) {
                        let formData = new FormData();
                        // 服务端接收文件的参数名，文件数据，文件名
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        upload(formData).then(res=>{

                            if(res.status===200){
                                success(res.data.data.path)
                            }else {
                                failure(res.msg)
                            }
                        })

                    }
                },

            }
        },
        mounted(){
            tinymce.init({})//特别注意这个空对象的存在，如果这个初始化空对象不存在依旧会报错，别问为什么忍着
        },
        methods:{
            change(data){
                console.log(data)
            }
        }

    }
</script>

<style  lang="sass">
   .tox,.tox-silver-sink
        z-index: 3000!important
</style>
